<template>
    <div class="prizeSetBox">
        <div class="operateDiv">
            <p class="operateText">获奖条件：</p>
            <span v-text="items.prizeReason" class="txt"></span>
        </div>
        <div class="operateDiv">
            <p class="operateText">领奖条件：</p>
            <span v-text="items.getReason" class="txt"></span>
        </div>
        <div class="operateDiv1">
            <p class="operateText">普通奖项：</p>
            <div class="prizeItems">
                <Prize v-for="(obj,index) in items.commonPrize" :key="index" :obj="obj" :pos="index*1+1" @enlargeImg="enlargeImg" :leng="items.commonPrize.length"></Prize>
            </div>
        </div>
        <div class="operateDiv">
            <p class="operateText">惊喜红包：</p>
            <span v-text="items.superRed" class="txt"></span>
        </div>
    </div>
</template>
<script>
import Prize from './Prize'

export default {
    components:{
        Prize,
    },
    props:['items'],
    data(){
        return {
            
        }
    },
    created(){
        console.log(this.items)
    },
    methods:{
        enlargeImg(data){
            this.$emit('enlargeImg',data)
        }
    }
}
</script>
<style lang="less">
	@import '~_config/mixin.less';
    @bgCol:#3395FF;

    .prizeSetBox{
        .operateText{
			width:11%;
			letter-spacing: 3px;
			text-align: end;
		}
		.operateDiv {
			width: 90%;
			margin: auto;
			margin-top: 40px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-left: 0;
        }
        .operateDiv1{
            width: 93%;
            max-width: 93%;
			margin: auto;
			margin-top: 40px;
            margin-left: 0;
            .fx(column,flex-start,flex-start);
            .prizeItems{
                // width:104%;
                .fx(row,flex-start);
                padding-top: .1rem;
                margin-left: .3rem;
            }
        }
    }
</style>
